<template>
  <el-dialog title="收货地址" :visible="visible">
    <el-form ref="userForm" :model="form" :rules="validateRules()" :label-width="formLabelWidth">
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="form.sex">
          <el-radio label="先生"></el-radio>
          <el-radio label="女士"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生日日期" prop="date1">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%"></el-date-picker>
      </el-form-item>
      <el-form-item label="头像">
        <!-- 头像上传 -->
        <el-upload action="http://localhost:9000/api/upfile" :show-file-list="false" :on-success="successUpload">
          <el-button size="small" type="primary">上传头像</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且不超过500kb</div>
        </el-upload>
        <el-image style="width: 100px; height: 100px" :src="form.avatar" fit="fill"></el-image>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible', false)">取 消</el-button>
      <el-button type="primary" @click="doSubmit">添加用户</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { errorMsg } from '@/utils/msg'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        username: '',
        password: '',
        sex: '女士',
        date1: '2022-09-13',
        avatar: ''
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    successUpload(response, file, fileList) {
      this.form.avatar = response.data.path
    },
    // 点击添加用户后
    doSubmit() {
      this.$refs['userForm'].validate(valid => {
        // 前端表单验证通过
        if (valid) {
          console.log(this.form)

          // this.$emit('update:visible', false)
        } else {
          errorMsg('表单验证不通过，请认真检查')
          return false
        }
      })
    },
    validateRules() {
      return {
        username: [
          { required: true, message: '账号不能为空' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符' },
          { validator: this.checkUsername }
        ],
        password: [{ required: true, message: '密码不能为空' }]
      }
    },
    checkUsername(rule, value, callback) {
      // callback(new Error('账号已经存在'))
      callback()
    }
  }
}
</script>

<style lang="scss" scoped></style>
